<template>
    <div class="invitation" :style="{minHeight:setHeight+'px'}">
        <!-- 顶部图片 -->
        <img src="../../assets/img/invitation/bg.png" alt="" class="invitation-img">
        <div class="invitation-content bg_colorff">
            <!-- 邀请数量和分享按钮 -->
            <div class="count-share flex flex-pack-justify font_size32 flex-align-center">
                <p class="font-bold">
                    我邀请的朋友:
                    <span :class="inviNum?'color_0d':''">{{inviNum}}</span>
                </p>
                <span class="share color_ff t_center" @click="jumpToShare">分享</span>
            </div>
            <!-- 有邀请列表时显示 -->
            <div v-if="inviNum">
                <!-- 邀请列表头部 -->
                <div class="invitation-list-title flex flex-pack-justify flex-align-center">
                    <p class="font_size32 font-bold">{{chooseTabs}}</p>
                    <div class="choose flex flex-align-center" @click="chooseFriType">
                        <span class="color_66 font_size28">筛选</span>
                        <img
                            src="../../assets/img/icon/jiantou_down.png"
                            alt=""
                            class="choose-img"
                            :style="isShowChooseList?'transform:rotate(180deg)':''"
                        >
                    </div>
                </div>
                <!-- 邀请列表内容 -->
                <ul>
                    <li
                        class="invitation-content-item flex p_t20 p_b20 flex-align-center"
                        v-for="(item,index) in invitationList"
                    >
                        <span class="font_size32 color_33 font-bold">{{String(index+1).padStart(3,'0')}}</span>
                        <img :src="item.img" alt="" class="avatar">
                        <div>
                            <p class="font_size28 color_33 font-bold uname">{{item.username}}</p>
                            <p class="font_size24 color_99">{{item.mobile}}</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 无邀请列表时显示 -->
            <div v-else class="bg_colorff no-invitation t_center">
                <img src="../../assets/img/invitation/share.png" alt="" class="share-gray">
                <p class="font_size28 color_dd">暂无邀请朋友</p>
            </div>
            <!-- 选择列表弹窗 -->
            <section class="shade" v-if="isShowChooseList" @click="clickShade()">
                <ul class="choose-list-ul bg_colorff">
                    <li
                        class="choose-list-item font_size32 color_33 font-bold"
                        v-for="item in chooseList"
                        @click="chooseListFuc(item)"
                    >{{item}}</li>
                </ul>
            </section>
        </div>
    </div>
</template>

<script>
import {wxShare} from '../../util/wxShare'
export default {
  data() {
    return {
      setHeight: document.documentElement.clientHeight,
      inviNum: 0, //邀请人数
      chooseTabs: "全部朋友", //选择列表后显示的选择内容
      invitationList: [], //邀请列表数据
      isShowChooseList: false, //是否显示选择列表
      chooseList: ["全部朋友", "已消费朋友", "未消费朋友"]
    };
  },

  mounted() {
    this.getPageData();
    this.onShare();
  },

  methods: {
    //获取页面数据
    getPageData(type = 0) {
      this.$util
        .get("user/getUserShareList", {
          uid: this.$store.state.userinfo.uid,
          type: type
        })
        .then(res => {
          this.invitationList = res.data.list;
          this.inviNum = res.data.count;
        });
    },

    //打开分享引导蒙层
    jumpToShare() {
         alert('点击右上角分享按钮')
    },

    // 初始化分享信息
    onShare(){
        var share_config = {
            title: '测试', // 分享标题
            desc: '这是描述2',
            link: `${window.location.host}?uid=${this.$store.state.userinfo.uid}`, // 分享链接
            imgUrl: '' // 分享图标
         }
         wxShare(share_config).catch(error => Toast(error.message))
    },

    //点击筛选
    chooseFriType() {
      this.isShowChooseList = !this.isShowChooseList;
    },
    //点击类型列表
    chooseListFuc(txt) {
      let type;
      this.chooseTabs = txt;
      switch (txt) {
        case "全部朋友":
          type = 2;
          break;
        case "已消费朋友":
          type = 1;
          break;
        case "未消费朋友":
          type = 0;
          break;
        default:
          break;
      }
      this.getPageData(type);
    },
    //点击遮罩
    clickShade() {
      this.isShowChooseList = false;
    }
  }
};
</script>
<style lang='less' scoped>
@import url(../../assets/css/center/invitation.less);
</style>